<template>
  <div class="ver-layout">
    <title-view class="title-view"></title-view>
    <section class="sheet">
      <bill-table v-model="clearFlag"></bill-table>
    </section>
    <div class="action-btn">
      <el-button @click="clearData" type="warning" size="small">清空数据</el-button>
      <el-button @click="printPage" type="primary" size="small">打印</el-button>
    </div>
  </div>
</template>

<script>
import BillTable from "@/views/print/billTable/billTable";
import TitleView from "@/components/title-view";

export default {
  name: "print",
  components: {TitleView, BillTable},
  data() {
    return {
      clearFlag: false,
      printFlag: false
    }
  },
  mounted() {
    window.onafterprint = function () {
      this.printFlag = false
    }
  },
  methods: {
    clearData() {
      this.clearFlag = true
    },
    printPage() {
      this.printFlag = true
      window.print()
    }
  }
}
</script>

<style scoped>
.action-btn {
  position: fixed;
  bottom: 80px;
  right: 80px;
}

@media print {
  .title-view {
    display: none;
  }

  .action-btn {
    display: none;
  }
}
</style>
